<!-- 
路径
    每一种图案绘制，都有自己专有的属性样式，
    多种图案同时绘制，但属性名重复、值不同时，就可能出现混淆、覆盖等问题，
    利用路径的重设、闭合可以将它们分隔开，类似边界的作用。

    建议
        任何一个图案绘制之前，
        路径重设，最好都设置 ctx.beginPath()
        路径闭合，按需求去设置 ctx.closePath()
        
    拓展
        与路径类似的是“变形”：状态保存、状态重置

画笔
    lineWidth       粗细
    fillStyle       填充色
    strokeStyle     描边色
    末端
    连接处
    重合处
    ...
    最后才是：fill()、stroke()
    
    拓展
        1）fill()
            点之间可以不闭合，但至少3个点，填充才能看到效果
        2）fill()与stroke()的顺序
            一般建议先fill，后stroke
            因为fill在stroke后面时，会把边框粗细覆盖一半
        3）几乎所有颜色格式都支持，但要用引号
            #fff
            red
            ...
            rgba()

书写顺序建议
    1）画布标签对象
    2）2d上下文对象
    ****************（一个图案的绘制：start）
    3）变形状态：保存
    4）路径：重设
        线段、矩形、圆等
    5）路径：闭合
    6）阴影
    7）画笔设置
        通常下：4)之前、5)之后，公共部分
        也可以：4)5)之间，专有属性的设置
    8）变形状态：重置
    ****************（一个图案的绘制：end）
注意：
    路径闭合后，6)7)需要重新设置，也就是写在路径里面
    因为多个路径边界共存时，会将画笔的设置隔绝，让画笔不起作用
-->
